<%--
  Created by IntelliJ IDEA.
  User: 35201
  Date: 2025/7/22
  Time: 1:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AVR - 社区平台</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/CSS/User/home.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/CSS/chat/chat.css">

</head>

<script>
  let channelList =JSON.parse(sessionStorage.getItem("channelList"));
  sessionStorage.setItem("channelList", JSON.stringify(channelList));
  const contextPath = "${pageContext.request.contextPath}";
  const userName="${user.userName}";
  const userId=${user.userId};
  const email='${user.email}';
</script>

<body>
<!-- 左侧导航栏 -->
<div class="sidebar">
  <div class="sidebar-header">
    <a href="${pageContext.request.contextPath}/User/home?email=${user.email}" class="logo" id="logo">AVR</a>
  </div>

  <div class="nav-buttons">
    <a href="#" class="nav-button" id="private-message">
      <i class="fas fa-envelope"></i>
      <span>私信</span>
    </a>
    <a href="${pageContext.request.contextPath}/User/discover?email=${user.email}" class="nav-button" id="discover">
      <i class="fas fa-compass"></i>
      <span>发现</span>
    </a>
    <a href="${pageContext.request.contextPath}/accompany?email=${user.email}" class="nav-button" id="play-together">
      <i class="fas fa-gamepad"></i>
      <span>陪玩</span>
    </a>
  </div>

  <div class="channels-container" id="channels-container">
    <!-- 频道列表将通过JavaScript动态生成 -->
  </div>

  <div class="user-profile" id="user-profile">
    <a href="${pageContext.request.contextPath}/User/userInformation?email=${email}" id="user_a">
      <img src="${user.avatar}" alt="" id="user_img">
      <span class="username">${user.userName}</span>
    </a>
  </div>
</div>

<!-- 主内容区 -->
<div class="main-content">
  <!-- 顶部导航栏 -->
  <div class="top-nav">
    <div></div> <!-- 占位空div -->

    <div class="nav-buttons-right">
      <a href="${pageContext.request.contextPath}/admin/addfunds" class="nav-button-right" id="shop">
        <i class="fas fa-shopping-cart"></i>
        <span>充值</span>
      </a>
      <a href="#" class="nav-button-right" id="messages">
        <i class="fas fa-bell"></i>
        <span>消息</span>
      </a>
      <div class="dropdown" id="messages-dropdown">
        <div class="dropdown-header">回复我的</div>
        <a href="#" class="dropdown-item">@我的</a>
        <a href="#" class="dropdown-item">我的帖子</a>
        <a href="#" class="dropdown-item">我的回复</a>
        <a href="#" class="dropdown-item">我的收藏</a>
        <div class="dropdown-divider"></div>
        <div class="dropdown-empty">暂时没有数据</div>
      </div>

      <a href="#" class="nav-button-right" id="follow">
        <i class="fas fa-heart"></i>
        <span>关注</span>
      </a>
      <div class="dropdown" id="follow-dropdown">
        <div class="dropdown-header">关注</div>
        <a href="#" class="dropdown-item">关注的人</a>
        <a href="#" class="dropdown-item">关注的社区</a>
        <a href="#" class="dropdown-item">关注的话题</a>
        <div class="dropdown-divider"></div>
        <div class="dropdown-empty">暂时没有数据</div>
      </div>

      <a href="#" class="nav-button-right" id="search">
        <i class="fas fa-search"></i>
        <span>搜索</span>
      </a>
      <div class="dropdown" id="search-dropdown">
        <div class="dropdown-header">搜索</div>
        <div class="dropdown-empty">输入关键词搜索内容</div>
      </div>
    </div>
  </div>

  <!-- 内容区域 -->
  <div class="content-area">
    <div class="content-container" id="content-container">
      <!-- 内容区域将根据导航动态加载内容 -->
      <!-- 主聊天区 -->
      <div class="chat-container">
        <div class="messages" id="messages1">
          <!-- 消息将通过JS动态添加 -->
        </div>
        <div class="input-area">
          <input type="text" id="message-input" placeholder="发送消息...">
        </div>
      </div>
      <form style="display: none">
        <input id="username" value="${user.userName}">
        <input id="userId" value="${user.userId}">
      </form>
    </div>
  </div>
</div>

<!-- 创建频道浮层 -->
<div class="modal-overlay" id="create-channel-modal">
  <div class="modal-content">
    <div class="modal-header">
      <h3 class="modal-title">创建频道</h3>
    </div>
    <div class="modal-body">
      <div class="form-group">
        <label class="form-label">频道名称</label>
        <input type="text" class="form-input" id="channel-name" placeholder="输入频道名称" required>
      </div>

      <div class="form-group">
        <label class="form-label">频道封面</label>
        <!-- 修改为矩形封面预览区域 -->
        <div class="cover-upload">
          <label for="channel-cover" class="cover-pw" id="cover-pw">
            <i class="fas fa-image"></i>
            <span>点击上传封面 (281x140)</span>
          </label>
          <input type="file" id="channel-cover" accept="image/*" style="display: none;">
        </div>
      </div>

      <div class="form-group">
        <label class="form-label">频道种类</label>
        <select class="form-input" id="channel-category">
          <option value="射击游戏">射击游戏</option>
          <option value="MOBA">MOBA</option>
          <option value="MMORPG">MMORPG</option>
          <option value="休闲游戏">休闲游戏</option>
          <option value="解谜游戏">解谜游戏</option>
          <option value="其他">其他</option>
        </select>
      </div>

      <div class="form-group">
        <label class="form-label">频道描述</label>
        <textarea class="form-input" id="channel-desc" placeholder="输入频道描述（可选）" rows="3"></textarea>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" id="cancel-create-channel">
        <i class="fas fa-times"></i> 取消
      </button>
      <button class="btn btn-primary" id="confirm-create-channel">
        <i class="fas fa-plus"></i> 创建
      </button>
    </div>
  </div>
</div>

<script src="${pageContext.request.contextPath}/static/JS/chat/test.js"></script>
<script src="${pageContext.request.contextPath}/static/JS/User/home.js"></script>

</body>
</html>

